<template>
  <div class="content" ref="contents" id="contents">
    <div class="top_box" v-if="update">
      <div>
        <div class="zuidate" style="padding-left:20px;font-size:14px;color:#888;" v-if="update">编辑于 {{ update }}</div>
      </div>
      <div style="display: flex;">
        <div class="top_preview" v-if="templateId" @click="viewTest">
          <div><img :src="previewIcon" width="14px" height="14px"></div>
          <div class="top_preview_text">预览</div>
        </div>
        <div class="top_submit" v-if="templateId" @click="submit">
          <el-button type="primary" icon="el-icon-s-promotion" @click="gofabu()">发布</el-button>
        </div>
      </div>
    </div>
    <el-row type="flex" justify="space-around">
      <!-- <el-col :span="4"> -->
      <div class="rightxuan">
        <div class="left_content">
          <div class="options">
            <div class="options_title">基础</div>
            <div class="options_item">
              <div class="options_item_box" v-for="v in leftOptions" :key="v.text" @click="choose(v.text)">
                <div><img :src="v.icon" width="16px" height="16px"></div>
                <div class="item_box_title">{{ v.text }}</div>
              </div>
            </div>
          </div>
          <!-- <div class="options">
            <div class="options_title">常见题库</div>
            <div class="options_item">
              <div class="options_item_box" style="background-color: #fffaf2;" v-for="v in leftOptionss" :key="v.text"
                @click="choose(v.text)">
                <div><img :src="v.icon" width="16px" height="16px"></div>
                <div class="item_box_title">{{ v.text }}</div>
              </div>
            </div>
          </div> -->
          <!-- <div class="notice">
            <div class="notice_title">评分规则说明</div>
            <div class="article">
              <div>评价分值按5级量表（2-10分）：</div>
              <div>1、非常不满意 2分 </div>
              <div>2、不满意 4分 </div>
              <div>3、一般 6分 </div>
              <div>4、满意 8分 </div>
              <div>5、非常满意 10分</div>
            </div>
          </div> -->
          <!-- <div class="notice">
            <div class="article">
              <div>特别说明： </div>
              <div> 1、如果设置了分值，会参与计算。</div>
              <div>2、可以设置某问题的选项为：没参与/没检查/不了解等，可以写分值0，0不参与计算。</div>
            </div>
          </div> -->
        </div>

      </div>

      <!-- </el-col> -->
      <el-col :span="14">
        <!-- 	 <div v-if="this.section.length==0" style="width: 90%;margin: 0 auto;">
		 	<div style="width: 170px;height: 140px; margin: 0 auto;margin-top: 50px;"><img style="width: 170px;height: 140px; " src="../../../assets/icons/wuluoji.png" alt=""></div>
		 	
		 	<p style="font-family: Microsoft YaHei UI, Microsoft YaHei UI;
		 	text-align: center;
		 	line-height: 60px;
		 font-weight: 400;
		 font-size: 14px;">当前题目暂无任何问题，快点击左侧选项去添加吧~</p>
		 	
		 	
		 </div> -->
        <div class="gunmain" id="scrollable">
          <div class="center_content m-t-20">
            <el-form :model="qustionForm">

              <el-form-item size="medium">
                <el-input class="custom-input" @blur="edittemTit()" v-model="qustionForm.title"
                  placeholder="请输入问卷标题"></el-input>
              </el-form-item>

              <el-form-item>
                <el-input type="textarea" class="custom-inputt" @blur="edittemTit()" v-model="qustionForm.content"
                  :min-height="192" placeholder="这里可以输入表单描述。
如:感谢您抽出几分钟时间填写以下内容，我们现在马上开始吧!"></el-input>
              </el-form-item>
              <div v-if="this.section.length == 0" style="width: 90%;margin: 0 auto;">
                <div style="width: 170px;height: 140px; margin: 0 auto;margin-top: 100px;"><img
                    style="width: 170px;height: 140px; " src="../../../assets/icons/wuluoji.png" alt=""></div>

                <p style="font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			  	 	text-align: center;
			  	 	line-height: 60px;
			  	 font-weight: 400;
			  	 font-size: 14px;">当前题目暂无任何问题，快点击左侧选项去添加吧~</p>


              </div>
              <div v-if="this.section.length > 0">

                <el-form-item prop="title">
                  <!-- 题目开始 -->
                  <!-- <section class="border flex-col project">
				     <div class="row-between p-l-10 p-r-20 m-t-20 m-l-20">
				       <div class="flex">
				         <div class="border p-l-20 p-r-20 p-t-10 p-b-10 xxl normal addBtn" style="flex-shrink: 0"
				           @click="pushProject">
				           添加题目</div>
				         <div class="border m-l-20 p-l-20 p-r-20 p-t-10 p-b-10 xxl normal submitBtn" @click="submit">
				           完成问卷
				         </div>
				         <div class="border m-l-20 p-l-20 p-r-20 p-t-10 p-b-10 xxl normal viewBtn" @click="viewTest">
				           预览问卷
				         </div>
				       </div>
				       <article>
				         <p>评价按5级量表（1-5分）。非常不满意（1分)、不满意(2分)、一般(3分)、满意(4分)、非常满意(5分)</p>
				         <p>1、如果设置了分值，会参与计算。</p>
				         <p>2、可以设置某问题的选项为：没参与/没检查/不了解等，可以写分值0，分值0不参与计算</p>
				       </article>
				       <span class="border p-l-10 p-r-10 normal plus-project" @click="pushProject"><i
				           class="el-icon-plus"></i>
				       </span>
				     </div>
				   </section> -->
                  <section @click="chooseitem(value)" style="border:none; border-radius:5px;"
                    class=" flex-col project m-b-20" v-for="(value, j) in section" :key="value.id">
                    <div class="m-t-20 flex-col m-l-20">
                      <div class="row-end p-r-20 p-l-5">
                        <!-- <div class="normal xl p-r-20 bold">删除题目</div>
				         <div class="border p-l-10 p-r-10 normal minus" @click="deleteProject(value.project.id)">
				           <i class="el-icon-minus" style=""></i>
				         </div> -->
                      </div>
                      <div class="p-b-15 p-r-20">
                        <!-- <div class="normal xl">第{{ j + 1 }}题</div> -->
                        <div style="display: flex;">
                          <div style="line-height: 37px;font-size: 18px;">{{ j + 1 }}.</div>
                          <el-input class="custom-inputxiao" @blur="editwentiover()" v-model="value.topicName" type=""
                            resize="none" placeholder="请输入标题"></el-input>
                          <div class="normal xl bold" style="cursor: pointer;" @click="deleteProject(value)">
                            <el-tooltip class="item" effect="dark" content="删除问题" placement="bottom">
                              <i style="color:red;" class="el-icon-delete"></i>
                            </el-tooltip>
                          </div>
                        </div>
                      </div>
                      <div class="p-b-15 p-r-20">
                        <el-input @blur="editwentiover()" v-model="value.tip" type="textarea"
                          placeholder="请输入填写提示"></el-input>
                      </div>

                      <!-- 多选选项 -->
                      <TransitionGroup name="fade" v-if="value.topicType == 1 || value.topicType == 3">
                        <div class="row-between p-r-20 col-center p-b-15" v-for="(v, k) in value.options" :key="k">
                          <div class="flex-1 row">
                            <div :class="{ circle: value.topicType == 1, square: value.topicType == 3 }">
                            </div>
                            <el-input @blur="editwentiover()" type="textarea" rows="1" resize="none"
                              :placeholder="'请输入答案' + (k + 1)" v-model="v.optionsName"
                              class="width-80 p-l-20"></el-input>
                          </div>
                          <div class="flex scores">
                            <div class="normal">分数</div>
                            <div class="p-l-10">
                              <el-input-number @change="editwentiover()" v-model="v.score" size="mini" :step="1"
                                :min="0" :max="20"></el-input-number>
                            </div>
                          </div>

                          <div class="row-between">
                            <el-button type="success" circle size="mini" icon="el-icon-top"
                              @click="moveOption(v, k, 'up')"></el-button>
                            <el-button type="warning" circle size="mini" icon="el-icon-bottom"
                              @click="moveOption(v, k, 'down')"></el-button>


                            <el-tooltip class="item" effect="dark" content="删除选项" placement="right-start">
                              <el-button type="danger" circle size="mini" icon="el-icon-minus"
                                @click="addAnswer(value.id, 'minus', k, v)"></el-button>
                            </el-tooltip>

                            <!-- <div class="myBtn  up">
				               <i class="el-icon-bottom xl"></i>
				             </div> -->
                            <!-- <div class="myBtn  minus" >
				               <i class="el-icon-minus xl"></i>
				             </div> -->
                          </div>

                        </div>
                      </TransitionGroup>
                      <!-- 多选选项结束 -->
                      <div v-if="value.topicType == 2">
                        <el-input type="textarea" rows="1" resize="none" placeholder="请输入内容" v-model="sing"
                          class="width-100 p-r-20  p-b-20" :disabled="true"></el-input>
                      </div>
                      <div v-if="value.topicType == 4">
                        <el-input type="textarea" rows="2" resize="none" placeholder="请输入内容" v-model="mul"
                          class="width-100 p-r-20  p-b-20" :disabled="true"></el-input>
                      </div>
                      <div class="row-between p-b-20">
                        <!-- <div>
				           <el-select v-model="value.project.multipleValue" placeholder="请选择"
				             @change="multipleChange(value.project.id)">
				             <el-option v-for="item in multiple" :key="item.value" :label="item.label" :value="item.value">
				             </el-option>
				           </el-select>
				         </div> -->
                        <!-- <div>
				           <el-checkbox v-model="value.project.isRequired">是否必答</el-checkbox>
				         </div> -->
                        <!-- <div>
				           <el-input v-model="value.project.sort" placeholder="排序"></el-input>
				         </div> -->
                        <!-- <div>
				           <el-input v-model="value.project.keyWord" placeholder="关键字，2-6字" maxlength="6"></el-input>
				         </div> -->
                        <!-- <div>
				           <el-select v-model="value.project.sectorValue" placeholder="选择环节">
				             <el-option v-for="item in sector" :key="item.value" :label="item.label" :value="item.value">
				             </el-option>
				           </el-select>
				         </div> -->
                        <div class="flex-row  p-r-20" v-if="value.topicType == 1 || value.topicType == 3">
                          <span class="normal xl p-r-20 " @click="editwentiover(value)"
                            style="font-size:14px; color:#409eff;cursor: pointer;">+添加选项</span>
                          <!-- <div class="p-l-10 p-r-10 border plus  text-center" @click="editwentiover(1)">
				             <i class="el-icon-plus"></i>
				           </div> -->
                        </div>
                        <div class="flex-row  p-r-20" v-if="value.topicType == 2 || value.topicType == 4">

                        </div>
                        <!-- <div class="normal xl p-r-20 bold" style="cursor: pointer;"
				           @click="deleteProject(value)">  
				 							 <el-tooltip class="item" effect="dark" content="删除问题" placement="bottom">
				 							     <i style="color:red;" class="el-icon-delete"></i>
				 							    </el-tooltip>
				 							</div> -->
                      </div>

                    </div>
                  </section>
                  <!-- 题目结束 -->
                </el-form-item>

              </div>

            </el-form>
          </div>


        </div>
        <!-- <div><img :src="topCover"></div> -->

      </el-col>
      <!-- <el-col :span="4"> -->
      <div class="tiaojian" v-if="objxuan.isRequired">
        <div class="tiaojianmain">
          <div class="tijiaomaintit">选择类型</div>
          <div class="leixingname">
            <div class="leixingnamel">
              <img :src="RightTipsIcon" width="16px" height="16px">
            </div>
            <div class="leixingnamer">
              {{ RightTipsText }}
            </div>
          </div>
          <div class="tijiaomaintit">验证</div>
          <div class="yanzheng">
            <div class="yanzhengl">
              必答
            </div>
            <div class="yanzhengr" @click="changekaiguan()">
              <el-switch :width="35" v-model="objxuan.isRequiredshow" active-color="#409EFF" inactive-color="#888888">
              </el-switch>
            </div>
          </div>
          <div class="tijiaomaintit">选择问题环节</div>
          <div class="wentilei">
            <el-radio @input="editwentiover()" v-for="item in sector" style="margin-bottom: 20px;"
              v-model="objxuan.linkType" :label="item.value">{{ item.label }}</el-radio>
          </div>
          <div class="tijiaomaintit">关键字</div>
          <div class="guanjian">
            <el-input @change="editwentiover()" v-model="objxuan.keyWord" placeholder="请输入关键字"></el-input>
          </div>
          <div v-if="objxuan.topicType == '1' || objxuan.topicType == '3'">
            <div class="tiaojianset">
              <div class="tiaojiansetl">逻辑设置</div>
              <div class="tiaojiansetr"> <el-button type="primary" @click="goaddtiaojian()">去设置</el-button></div>
            </div>

          </div>
        </div>
      </div>
      <div class="tiaojian" style="background-color: transparent;" v-if="!objxuan.isRequired">
        <div class="tiaojianmain">


        </div>
      </div>
      <!-- </el-col> -->
    </el-row>
    <el-drawer :wrapperClosable="false" :visible.sync="drawer" direction="rtl" :show-close="false" :withHeader="false"
      size="40%">
      <div class="luojiset">
        <div class="luojisettit">
          <div class="luojisettitmain">
            <div class="luojisettitl">逻辑显示设置</div>
            <div class="luojisettir" @click="claoseluoji()"><i class="el-icon-close"></i></div>
          </div>

        </div>
        <div class="luojisetinfo">
          <div class="luojisetinfol">题目：{{ objxuan.topicName }}</div>
          <div class="luojisetinfor" @click="addluojiinfo()" v-if="!tiaojianxinfo">+添加显示逻辑</div>
        </div>
        <div class="tiaojiantian" v-if="showtianjia">
          <div class="tiaojiantianmain">
            <div class="tiantop">
              <div class="tianlogo"></div>
              <div class="tianlogomiao">新规则（未保存）</div>
            </div>
            <div class="tianmiaoshu">当满足一下条件时</div>
            <div class="tianxuan">
              <div class="tianxuanmain">
                <div class="tianxuantit" style="line-height: 30px;">在</div>
                <div class="xuanming"><el-select disabled v-model="objxuan.sort + '.' + objxuan.topicName"
                    placeholder="请选择">
                    <el-option style="width: 100px;" v-for="item in optionsce" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select></div>
                <div class="xuantype">
                  <el-select @change="$forceUpdate()" v-model="objxuan.type" placeholder="请选择">
                    <el-option v-for="item in denglist" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                </div>
                <div class="xuanxiangitem">
                  <el-select @change="$forceUpdate()" :disabled="objxuan.type == ''" v-model="objxuan.optionsId"
                    placeholder="请选择">
                    <el-option v-for="item in objxuan.options" :key="item.id" :label="item.optionsName"
                      :value="item.id">
                    </el-option>
                  </el-select>

                </div>
              </div>
            </div>
            <div class="xuanover">
              <el-radio-group @change="$forceUpdate()" v-model="objxuan.isEnd">
                <el-radio :label="item.id" v-for="item in listxian">{{ item.title }}</el-radio>

              </el-radio-group>
            </div>
            <el-divider></el-divider>
            <div class="xuanbang" style="margin-top:30px;" v-if="objxuan.isEnd == 2">

              <el-radio-group @change="$forceUpdate()" v-model="objxuan.topicId">
                <el-radio style="margin-bottom: 30px;" :label="it.id" v-for="(it, index) in section">{{ index + 1 }}.{{
                  it.topicName }}</el-radio>

              </el-radio-group>

              <!-- <el-radio v-model="objxuan.tiao" label="2">则结束问卷</el-radio> -->
              <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group> -->
            </div>
            <div class="xuanbtn">
              <div class="xuanbtnl"> <el-button type="primary" @click="addtiaojian(1)">确定</el-button></div>
              <div class="xuanbtnr"> <el-button plain @click="canceladdluoji()">取消</el-button></div>

            </div>
          </div>
        </div>
        <div v-if="!showtianjia">
          <div class="tiaojianlist" v-if="tiaojianxinfo">
            <div class="tiaojianitem">
              <div class="tiaoajianitemmain">
                <div class="tiaojianitemtop">
                  <div class="tiaojianitemtopl">规则1</div>
                  <div class="tiaojianitemtop2">
                    <div class="tiaojianitemtop2bianji" @click="bianjitiaoitem()">编辑</div>
                    <div class="tiaojianitemtop2del" @click="deltiaojian()">删除</div>
                  </div>

                </div>
                <div class="tiaojianiteminfo">
                  <div class="tiaoajianiteminfotit">当条件为:</div>
                  <div class="tiaoitemming"
                    style="width: 200px;overflow:hidden;    text-overflow:ellipsis;    white-space:nowrap;">
                    {{ tiaojianxinfo.mainTopicName }}</div>
                  <div class="tiaoitemdeng" style="width: 50px;text-align:center;">{{ tiaojianxinfo.typeName }}</div>
                  <div class="tiaoitemxuanname"
                    style="width: 200px;overflow:hidden;    text-overflow:ellipsis;    white-space:nowrap;">
                    {{ tiaojianxinfo.optionsName }}</div>
                </div>
                <div class="zexian">
                  <div class="zexiantit" style="width: 14%;line-height:25px;">则显示：</div>
                  <div class="zexianshilist" style="width:86%;line-height:25px;">
                    <div class="zwxianitem">
                      {{ tiaojianxinfo.topicName }}
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!tiaojianxinfo" style="width: 90%;margin: 0 auto;">
            <div style="width: 170px;height: 140px; margin: 0 auto;margin-top: 50px;"><img
                style="width: 170px;height: 140px; " src="../../../assets/icons/wuluoji.png" alt=""></div>

            <p style="font-family: Microsoft YaHei UI, Microsoft YaHei UI;
	  	text-align: center;
	  	line-height: 60px;
	  font-weight: 400;
	  font-size: 14px;">当前题目暂无任何规则，快去添加吧~</p>


          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { linkDic, getmobandetail, addModal, addxuanti, edittemTitapi, delprooroption, addluoji, wentiluoji, editWenti, delluoji, editluoji, fabumoban } from '@/api/wenjuan/title'
import { listTypeNew } from "@/api/wenjuan/type";
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'wenjuanTpl',
  data() {
    return {
      listxian: [
        {
          title: "则显示问卷",
          id: 2
        },
        {
          title: "则结束问卷",
          id: 1
        }
      ],
      showtianjia: false,
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      radioxuanisover: "1",
      valuexuan: '',
      valuedeng: '',
      xuanlist: [
        {
          value: "1",
          label: "01单选"
        }
      ],
      optionsce: [
        {
          value: "11111111111",
          label: "01单选"
        }
      ],
      denglist: [
        {
          value: 1,
          label: "等于"
        },
        {
          value: 2,
          label: "不等于"
        }
      ],
      valuebaio: "01单选",
      drawer: false,
      guanjianzi: "",
      radiowen: "",
      value: true,
      mul: '',  //多选用的字段，就是个样子，不参与传值，
      sing: '',  //单选用的字段，就是个样子，不参与传值，
      previewIcon: require("@/assets/icons/Preview@2x.png"),
      topCover: require("@/assets/images/test_cover.png"),
      leftOptions: [
        { text: '单选', icon: require("@/assets/icons/Single_option@2x.png") },
        { text: '多选', icon: require('@/assets/icons/Multiple_choice@2x.png') },
        { text: '单行文本', icon: require('@/assets/icons/Single_line_text@2x.png') },
        { text: '多行文本', icon: require('@/assets/icons/Multiline_text@2x.png') },
      ],
      qustionForm: {
        title: "",
        content: "",
      },
      multiple: [
        {
          value: '3',
          label: '多选'
        },
        {
          value: '1',
          label: '单选'
        },
        {
          value: '2',
          label: '单行文本'
        },
        {
          value: '4',
          label: '多行文本'
        },
      ],
      sector: [],
      templateId: "",
      section: [
        // {
        //   project: {
        //     id: 0,
        //     title: "", //标题
        //     describe:'',//描述
        //     options: [
        //       //答案
        //       {
        //         id: null,
        //         answer: "", //答案
        //         scores: 3, //得分
        //       },
        //     ],
        //   },
        // },
      ],
      currentTitle: null, //提示
      // multipleValue: '',
      // sectorValue: '',
      // isRequired: false,
      // sort: 0,
      // keyWord: ''
      objxuan: {},
      tiaojianxinfo: "",
      bianjitiao: true,
      leftOptionss: [
        { text: '满意度', icon: require("@/assets/icons/Single option _ Default@2x.png") },
        { text: '是否', icon: require("@/assets/icons/Single option _ Default@2x.png") }

      ],
      update: "",
      hospCode: '',
    };
  },
  // created() {
  //   var Color;
  //   (function (Color) {
  //       Color[Color["Red"] = 1] = "Red";
  //       Color[Color["Green"] = 2] = "Green";
  //       Color[Color["Blue"] = 3] = "Blue";
  //   })(Color || (Color = {}));

  //   console.log('Red' in Color); // 输出: true
  //   console.log( 1 in Color); // 输出: true
  //   console.log(Color.Green); // 输出: 2
  //   console.log(Color[2]); // 输出: Green
  // },
  async mounted() {
    let id = {
      hospCode: this.$route.query.hosp
    }
    this.hospCode = this.$route.query.hosp
    this.templateId = this.$route.query.id
    if (this.templateId) {
      getmobandetail({
        templateId: this.templateId
      }).then(res => {
        this.qustionForm.title = res.data.title
        this.qustionForm.content = res.data.description
        this.section = res.data.hcemTemplatTopic
        this.objxuan = this.section[0]
        if (this.objxuan.isRequired == 2) {
          this.objxuan.isRequiredshow == false
        }
        if (this.objxuan.isRequired == 1) {
          this.objxuan.isRequiredshow == true
        }
        this.$forceUpdate()
      })
    }
    if (id !== undefined) {
      let ress = await listTypeNew(id)  //环节列表
      ress.data.map(v => {
        this.sector.push({
          'value': v.id,
          'label': v.link_type_name
        })
      })
      //  console.log(ress,123);
    }
    // let res = await linkDic()  //环节列表
    // if (res.data.length > 0) {
    //   res.data.map(v => {
    //     this.sector.push({
    //       'value': v.dictValue,
    //       'label': v.dictLabel
    //     })
    //   })
    // }

    // console.log(this.$route.query.hosp);
    //this.pushProject();
  },
  computed: {
    RightTipsIcon() {
      if (this.objxuan.topicType == '1') {
        return require("@/assets/icons/Single_option@2x.png")
      }
      if (this.objxuan.topicType == '2') {
        return require('@/assets/icons/Single_line_text@2x.png')
      }
      if (this.objxuan.topicType == '3') {
        return require('@/assets/icons/Multiple_choice@2x.png')
      }
      if (this.objxuan.topicType == '4') {
        return require('@/assets/icons/Multiline_text@2x.png')
      }
    },
    RightTipsText() {
      if (this.objxuan.topicType == '1') {
        return '单选'
      }
      if (this.objxuan.topicType == '2') {
        return '单行文本'
      }
      if (this.objxuan.topicType == '3') {
        return '多选'
      }
      if (this.objxuan.topicType == '4') {
        return '多行文本'
      }
    }
  },
  methods: {
    gofabu() {
      fabumoban({
        templateId: this.templateId
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "发布成功",
          });
        }
      })
    },
    changekaiguan() {
      if (this.objxuan.isRequiredshow == true) {
        this.objxuan.isRequired = 1
        this.$forceUpdate()
        this.editwentiover()
      }
      if (this.objxuan.isRequiredshow == false) {
        this.objxuan.isRequired = 2
        this.$forceUpdate()
        this.editwentiover()
      }
      console.log(123465)
    },
    deltiaojian() {
      delluoji({
        Id: this.tiaojianxinfo.id
      }).then(res => {
        this.tiaojianxinfo = ""
      })
    },
    gettiaojian() {
      wentiluoji({
        topicId: this.objxuan.id
      }).then(res => {
        if (res.data.type) {
          this.tiaojianxinfo = res.data
          this.objxuan.isEnd = this.tiaojianxinfo.isEnd
          this.objxuan.topicId = this.tiaojianxinfo.topicId
          this.objxuan.type = this.tiaojianxinfo.type
        } else {
          this.tiaojianxinfo = ""
        }
      })
    },
    editwentiover(val) {
      if (val) {
        let EDIobj = {}

        // this.objxuan.options=[]
        // this.objxuan.option=JSON.stringify(this.objxuan.options) 
        // this.objxuan.option="'"+this.objxuan.options+"'"
        this.objxuan.addIdentity = "123"
        EDIobj = this.objxuan
        // EDIobj.options=[]
        editWenti(
          EDIobj
        ).then(res => {
          this.objxuan = res.data
          this.update = res.data.updateTime
          // val=this.objxuan

          console.log(this.section)
          this.section.forEach(el => {
            if (el.id == this.objxuan.id) {
              el.options = this.objxuan.options
              this.$forceUpdate()
            }
          })
        })
      } else {
        let EDIobj = {}
        // this.objxuan.options=[]
        // this.objxuan.option=JSON.stringify(this.objxuan.options) 
        // this.objxuan.option="'"+this.objxuan.options+"'"
        this.objxuan.addIdentity = ""
        EDIobj = this.objxuan
        // EDIobj.options=[]
        editWenti(
          EDIobj
        ).then(res => {
          console.log(res)
          this.update = res.data.updateTime
          this.$forceUpdate()
        })
      }

    },
    //编写模板标题
    edittemTit() {
      // console.log(123)
      if (this.qustionForm.title == '') {
        this.$message({
          type: "warning",
          message: "标题不能为空！",
        });
        return
      }
      edittemTitapi({
        Id: this.templateId,
        title: this.qustionForm.title,
        description: this.qustionForm.content
      }).then(res => {
        console.log(res)
        if (res.data) {
          this.update = res.data.updateTime
          this.$forceUpdate();
        }

      })

    },
    chooseitem(item) {
      console.log(item, 12346546)
      this.objxuan = item
      if (this.objxuan.isRequired) {
        if (this.objxuan.isRequired == 2) {
          this.objxuan.isRequiredshow = false
        }
        if (this.objxuan.isRequired == 1) {
          this.objxuan.isRequiredshow = true
        }
      } else {
        this.objxuan.isRequiredshow = false
      }

      this.$forceUpdate();

    },
    goaddtiaojian() {
      this.drawer = true
      this.gettiaojian()
    },
    canceladdluoji() {
      this.showtianjia = false
    },
    claoseluoji() {
      this.showtianjia = false
      this.drawer = false
    },
    addluojiinfo() {
      this.showtianjia = true
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    viewTest() {
      // this.submitNoGo()
      // let baseUrl = 
      let str = `${process.env.VUE_APP_JUMP}template_id=` + this.templateId
      window.open(str)
      // console.log(this.$store.state.hcem);
    },
    bianjitiaoitem() {
      this.showtianjia = true
    },
    addtiaojian(val) {
      console.log(this.objxuan)
      if (val == 1) {
        if (this.objxuan.optionsId) {
          if (this.objxuan.isEnd == 2) {
            if (this.objxuan.topicId) {
              addluoji({
                mainTopicId: this.objxuan.id,
                type: this.objxuan.type,
                topicId: this.objxuan.topicId,
                optionsId: this.objxuan.optionsId,
                isEnd: this.objxuan.isEnd
              }).then(res => {
                this.showtianjia = false
                this.gettiaojian()
                this.update = res.data.updateTime
                this.$forceUpdate();
              })
            } else {
              this.$message({
                type: "fail",
                message: "请选择题目",
              });
            }
          } else {
            addluoji({
              mainTopicId: this.objxuan.id,
              type: this.objxuan.type,
              topicId: this.objxuan.topicId,
              optionsId: this.objxuan.optionsId,
              isEnd: this.objxuan.isEnd
            }).then(res => {
              this.showtianjia = false
              this.update = res.data.updateTime
              this.$forceUpdate();
              this.gettiaojian()
            })
          }


        } else {
          this.$message({
            type: "fail",
            message: "请选择选项",
          });
        }

      }
      if (val == 2) {
        if (this.objxuan.optionsId) {
          if (this.objxuan.isEnd == 2) {
            if (this.objxuan.topicId) {
              editluoji({
                mainTopicId: this.objxuan.id,
                type: this.objxuan.type,
                topicId: this.objxuan.topicId,
                optionsId: this.objxuan.optionsId,
                isEnd: this.objxuan.isEnd,
                Id: this.tiaojianxinfo.id
              }).then(res => {
                this.showtianjia = false
                this.gettiaojian()
                this.update = res.data.updateTime
                this.$forceUpdate();
              })
            } else {
              this.$message({
                type: "fail",
                message: "请选择题目",
              });
            }
          } else {
            addluoji({
              mainTopicId: this.objxuan.id,
              type: this.objxuan.type,
              topicId: this.objxuan.topicId,
              optionsId: this.objxuan.optionsId,
              isEnd: this.objxuan.isEnd
            }).then(res => {
              this.showtianjia = false
              this.update = res.data.updateTime
              this.$forceUpdate();
              this.gettiaojian()
            })
          }


        } else {
          this.$message({
            type: "fail",
            message: "请选择选项",
          });
        }

      }

    },
    choose(text) {
      //console.log(text,'choose')
      if (this.qustionForm.title == '') {
        this.$message({
          type: "warning",
          message: "标题不能为空！",
        });
        return
      }
      if (text == '单选') {
        addxuanti({
          topicType: "1",
          templateId: this.templateId,
          hospitalId: this.hospCode,
          satisfaction: '',
          titleName: this.qustionForm.title,
          description: this.qustionForm.content
        }).then(res => {
          console.log(res)
          this.update = res.data.updateTime
          this.$forceUpdate();
          this.templateId = res.data.templateId
          this.objxuan = res.data
          this.objxuan.isEnd = 2
          this.objxuan.type = 1
          this.objxuan.topicId = ""
          this.objxuan.optionsId = ""
          this.objxuan.isRequiredshow = false
          this.objxuan.tip = ""

          // if(this.objxuan.isRequired==1){
          // 	this.objxuan.show==1
          // }
          this.section.push(res.data)
          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (text == '多选') {
        addxuanti({
          topicType: "3",
          templateId: this.templateId,
          hospitalId: this.hospCode,
          satisfaction: "",
          titleName: this.qustionForm.title,
          description: this.qustionForm.content
        }).then(res => {
          this.update = res.data.updateTime
          this.$forceUpdate();
          console.log(res)
          this.objxuan = res.data
          this.objxuan.isEnd = 2
          this.objxuan.topicId = ""
          this.objxuan.isRequiredshow = false
          this.objxuan.type = 1
          this.objxuan.optionsId = ""
          this.objxuan.tip = ""
          this.templateId = res.data.templateId
          this.section.push(res.data)


          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (text == '满意度') {
        addxuanti({
          topicType: "1",
          templateId: this.templateId,
          hospitalId: this.hospCode,
          satisfaction: "ok",
          titleName: this.qustionForm.title,
          description: this.qustionForm.content
        }).then(res => {
          this.update = res.data.updateTime
          this.$forceUpdate();
          console.log(res)
          this.objxuan = res.data
          this.objxuan.isEnd = 2
          this.objxuan.topicId = ""
          this.objxuan.isRequiredshow = false
          this.objxuan.type = 1
          this.objxuan.optionsId = ""
          this.objxuan.tip = ""
          this.templateId = res.data.templateId
          this.section.push(res.data)

          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (text == '是否') {
        addxuanti({
          topicType: "1",
          templateId: this.templateId,
          satisfaction: "type_isnot",
          hospitalId: this.hospCode,
          titleName: this.qustionForm.title,
          description: this.qustionForm.content
        }).then(res => {
          this.update = res.data.updateTime
          this.$forceUpdate();
          //console.log(res)
          this.objxuan = res.data
          this.objxuan.isEnd = 2
          this.objxuan.topicId = ""
          this.objxuan.isRequiredshow = false
          this.objxuan.type = 1
          this.objxuan.optionsId = ""
          this.objxuan.tip = ""
          this.templateId = res.data.templateId
          this.section.push(res.data)

          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (text == '单行文本') {
        addxuanti({
          topicType: "2",
          templateId: this.templateId,
          satisfaction: '',
          titleName: this.qustionForm.title,
          hospitalId: this.hospCode,
          description: this.qustionForm.content
        }).then(res => {
          this.update = res.data.updateTime
          this.$forceUpdate();
          console.log(res)
          this.objxuan = res.data
          this.objxuan.topicId = ""
          this.objxuan.isEnd = 2
          this.objxuan.type = 1
          this.objxuan.optionsId = ""
          this.objxuan.tip = ""
          this.templateId = res.data.templateId
          this.objxuan.isRequiredshow = false
          this.section.push(res.data)


          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (text == '多行文本') {
        addxuanti({
          topicType: "4",
          templateId: this.templateId,
          satisfaction: '',
          hospitalId: this.hospCode,
          titleName: this.qustionForm.title,
          description: this.qustionForm.content
        }).then(res => {
          console.log(res)
          this.update = res.data.updateTime
          this.$forceUpdate();
          this.objxuan = res.data
          this.objxuan.type = 1
          this.objxuan.isEnd = 2
          this.objxuan.topicId = ""
          this.objxuan.optionsId = ""
          this.objxuan.isRequiredshow = false
          this.templateId = res.data.templateId
          this.objxuan.tip = ""
          this.section.push(res.data)
          const div = document.getElementById('scrollable')
          this.$nextTick(function () {
            div.scrollTop = div.scrollHeight
          })
        })
      }
      if (this.section.length == 1) {
        if (this.templateId) {
          this.edittemTit()
        }
      }

      // if (text == '单选') {
      //   let id = this.pushProject('1', '单选')  //增加题目同时返回id
      //   this.multipleChange(id)
      // }
      // if (text == '多选') {
      //   let id = this.pushProject('3', '多选')  //增加题目同时返回id
      //   this.multipleChange(id)
      // }
      // if (text == '单行文本') {
      //   let id = this.pushProject('2', '单行文本')  //增加题目同时返回id
      //   this.multipleChange(id)
      // }
      // if (text == '多行文本') {
      //   let id = this.pushProject('4', '多行文本')  //增加题目同时返回id
      //   this.multipleChange(id)
      // }
      //console.log(text);
    },
    pushProject(num = '1', titleTips = '') {
      //增加题目
      let idNumber = this.randomId();
      let obj = {}
      obj.id = idNumber
      obj.title = titleTips
      obj.describe = ""
      obj.multipleValue = num
      obj.sectorValue = ""
      obj.isRequired = true
      obj.sort = this.section.length + 1
      obj.keyWord = ""
      obj.optionschose = ""
      obj.isdeng = ""
      obj.tiao = ""
      obj.isover = "1"
      obj.options = [
        //答案
        {
          id: 1,
          pid: idNumber,
          answer: "选项1", //答案
          scores: 0, //得分
          flag: false
        },
        {
          id: 2,
          pid: idNumber,
          answer: "选项2", //答案
          scores: 0, //得分
          flag: false
        },
        {
          id: 3,
          pid: idNumber,
          answer: "选项3", //答案
          scores: 0, //得分
          flag: false
        },
      ],
        this.objxuan = obj
      this.$forceUpdate();
      this.section.push({
        project: {
          id: idNumber,
          title: titleTips, //标题
          describe: '',//描述
          multipleValue: num,//单选多选值
          sectorValue: '', //环节
          isRequired: true,//是否必填
          sort: this.section.length + 1,    //优先级
          keyWord: '', //关键词
          options: [
            //答案
            {
              pid: idNumber,
              answer: "选项1", //答案
              scores: 0, //得分
              flag: false
            },
            {
              pid: idNumber,
              answer: "选项2", //答案
              scores: 0, //得分
              flag: false
            },
            {
              pid: idNumber,
              answer: "选项3", //答案
              scores: 0, //得分
              flag: false
            },
          ],
        },
      });
      let h = this.$refs.contents.offsetHeight;
      let h2 = this.$refs.contents.scrollHeight + 920;
      this.$nextTick(() => {
        document.documentElement.scrollTop = h2;
      });
      return idNumber
      // console.log(h2);
    },
    deleteProject(val) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        lockScroll: false,
      }).then(() => {
        delprooroption({
          questionId: val.id
        }).then(res => {
          this.update = res.data.updateTime
          this.$forceUpdate();
          this.section.find((v, k) => {
            if (v.id == val.id) {
              this.section.splice(k, 1);
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })

      });
    },
    addAnswer(pid, action, key, val) {
      if (action === "add") {
        this.section.find((v, k) => {
          // console.log(123, v);
          if (v.id == pid && ![2, 4].includes(Number(v.project.multipleValue))) {
            v.project.options.push({
              pid: pid,
              answer: `选项${v.options.length + 1}`, //答案
              scores: 0, //得分
              flag: false
            });
          } else {
            if (v.id == pid) this.$message.warning("文本类型不能添加选项");
          }
        });
      }

      if (action === "minus") {
        this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          lockScroll: false,
        }).then(() => {
          this.section.find((v) => {
            if (v.id == pid) {
              if (v.options.length == 1 && ![2, 4].includes(Number(v.templateId))) {
                this.$message.warning("最少有一个选项");
                return;
              } else {
                delprooroption({
                  optionsId: val.id
                }).then(res => {
                  v.options.splice(key, 1);
                  if (res.data) {
                    this.update = res.data.updateTime
                    this.$forceUpdate();
                  } else {

                  }

                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                })

              }
            }
          });
        });
      }
    },
    multipleChange(id) {
      let data = [{
        pid: id,
        answer: "", //答案
        scores: 0, //得分
        flag: false
      },
      {
        pid: id,
        answer: "", //答案
        scores: 0, //得分
        flag: false
      },
      {
        pid: id,
        answer: "", //答案
        scores: 0, //得分
        flag: false
      }]
      this.section.find(v => {
        if ([2, 4].includes(Number(v.project.multipleValue)) && v.project.id == id) {
          v.project.options = []
          return v
        } else {
          if (v.project.options.length == 0 && v.project.id == id) {
            v.project.options.push(...data)
          }
          // v.project.options.push(...data)
        }
        //v.project.id ,
        //  console.log( [2,4].includes(Number(v.project.multipleValue)));
      })

    },
    isPass() {
      //验证
      let t = this.qustionForm;
      let s = this.section;
      let temp = []; //为空就是验证通过
      let tempNum = null;
      //标题不能为空
      if (t.title.length < 2 || t.title == '') {
        this.$message.warning('问卷标题最少两个字')
        return false
      }
      //题目标题不能为空
      let type = s.map((v, k) => {
        if (v.project.title.length < 2 || v.project.title == "") {
          this.$message.warning(`第${k + 1}题标题最少两个字`);
          return false
        }
        // if (v.project.keyWord.length < 1 || v.project.keyWord == "") {
        //   this.$message.warning(`第${k + 1}题关键字不能为空`);
        //   return false
        // }

        if (v.project.multipleValue.length == 0) {
          this.$message.warning(`第${k + 1}题，请选择题目类型`);
          return false
        }
        // if (v.project.sectorValue.length == 0) {
        //   this.$message.warning(`第${k + 1}题，请选择环节`);
        //   return false
        // }
        return true
      });
      if (!type[0]) return false
      //答案不能为空
      s.find((v, k) => {
        let option = v.project.options;
        let find = option.find((value, key) => {
          if (value.answer.length < 1) {
            tempNum = k + 1;
            temp.push(value);
          }
        });
      });

      if (temp.length > 0) {
        this.$message.warning(`第${tempNum}题答案最少一个字符`);
        return false
      }
      if (this.$route.query.hosp == undefined) { //没有医院id传参不能提交
        this.$message.warning(`请选择医院`);
        setTimeout(() => {
          this.$router.push({ path: '/hcem/title' })
        }, 3000);
        return false
      }
      return true
    },
    async submit() {
      // let confirm = this.$confirm("问卷发布后，不能编辑，确认发布吗？", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      //   lockScroll: false,
      // }).then(() => {
      //   return true
      //   // console.log(params);
      // }, () => {
      //  return false
      // });
      // if(!await confirm) return
      // console.log(await confirm);


      if (this.isPass()) {  //是否验证通过
        //this.$message.success("通过验证");
        const SumitData = {
          'title': this.qustionForm.title,
          'description': this.qustionForm.content,
          'hosp': this.$route.query.hosp,
          'hcemTemplatTopic': [
          ],
        }
        this.section.map(v => {
          // console.log(v.keyWord);
          SumitData.hcemTemplatTopic.push({
            'topicName': v.project.title,
            'scoreInfoList': v.project.options.map(value => {
              return {
                'name': value.answer,
                'score': value.scores,
                'flag': false
              }
            }),
            'sort': v.project.sort,
            'linkType': v.project.sectorValue,
            'isRequired': v.project.isRequired ? 1 : 2,
            'tip': v.project.describe,
            'topicType': v.project.multipleValue,
            'keyWord': v.project.keyWord, //关键词
          })
        })
        // console.log(SumitData);
        // return
        let res = await addModal(SumitData)
        this.$router.push({ path: '/hcem/title' })
        if (res.code == 200) {
          this.$message.success("添加成功");
        }
      }
    },
    async submitNoGo() {
      if (this.isPass()) {  //是否验证通过
        //this.$message.success("通过验证");

        const SumitData = {
          'title': this.qustionForm.title,
          'description': this.qustionForm.content,
          'hosp': this.$route.query.hosp,
          'hcemTemplatTopic': [
          ],
        }

        this.section.map(v => {
          // console.log(v.keyWord);
          SumitData.hcemTemplatTopic.push({
            'topicName': v.project.title,
            'scoreInfoList': v.project.options.map(value => {
              return {
                'name': value.answer,
                'score': value.scores,
                'flag': false
              }
            }),
            'sort': v.project.sort,
            'linkType': v.project.sectorValue,
            'isRequired': v.project.isRequired ? 1 : 2,
            'tip': v.project.describe,
            'topicType': v.project.multipleValue,
            'keyWord': v.project.keyWord, //关键词
          })
        })

        this.$store.state.hcem.section = this.section
        this.$store.state.hcem.qustionForm.title = this.qustionForm.title
        this.$store.state.hcem.qustionForm.content = this.qustionForm.content
        this.$router.push({ name: 'viewwenjuan' });
        // console.log(SumitData);
        // return

        // let res = await addModal(SumitData)
        // if(res.code == 200){
        //   this.$message.success("添加成功");
        // }
      }
    },
    randomId() {
      //随机id
      const time = new Date().getTime().toString();
      const timeArr = time.split("");
      const arr = "abcdefghijklmnopqrstuvwxyz".split("");
      timeArr.forEach((item, index) => {
        const random = arr[Math.floor(Math.random() * arr.length)];
        timeArr.splice(index * 2, 0, random);
      });
      return timeArr.join("");
    },
    moveOption(value, num, action) {
      console.log(value, num.action, 1111)
      if (num == 0 && action == 'up') return  //到顶了直接返回
      let arr = this.section.find((v) => {  //当前选中的题目
        // console.log(v);
        if (v.id == value.topicId) return v
      })
      let currentIndex = this.section.findIndex((v) => {  //当前选中的题目的索引，上面可以写成一个懒的写了
        if (v.id == value.topicId) return v
      })
      if (action == 'down' && num >= arr.options.length - 1) return //到底了
      this.currentTitle = num
      if (action == 'up') {
        //不管是UP还是down，等于他们位置互换了
        let temp = this.section[currentIndex].options[num - 1] //移动到的位置的值
        this.section[currentIndex].options.splice(num, 1, temp)  //交互数组位置，用splice会触发vue更新
        this.section[currentIndex].options.splice(num - 1, 1, value)
      } else {
        let temp = this.section[currentIndex].options[num + 1] //移动到的位置的值
        this.section[currentIndex].options.splice(num, 1, temp)  //交互数组位置，用splice会触发vue更新
        this.section[currentIndex].options.splice(num + 1, 1, value)
        //不管是UP还是down，等于他们位置互换了
      }
      this.editwentiover()
      //console.log(arr, currentIndex);
      //console.log(this.section)
      //console.log(value,num,action);
    }
  },

};
</script>

<style>
/* 添加自定义类来覆盖默认样式 */
.custom-input .el-input__inner {
  height: 50px;
  /* 修改为你想要的高度 */
  line-height: 50px;
  /* 修改行高以垂直居中文本 */
  text-align: center;
  border: none;
  font-size: 20px;
}

.custom-inputt .el-input__inner {

  text-align: center;
}

.custom-inputxiao .el-input__inner {

  font-size: 15px;
  border: none;
  color: #000;
}
</style>
<style>
.gunmain::-webkit-scrollbar {
  width: 6px;
  /*滚动条宽度*/
  height: 6px;
  /*滚动条高度*/
}

.gunmain::-webkit-scrollbar-track {
  border-radius: 10px;
  /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
  background-color: #f2f2f2;
  /*滚动条的背景颜色*/
}

.gunmain::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: #d6dbe2;
  /*滚动条的背景颜色*/
}
</style>
<style lang="scss" scoped>
::v-deep .el-textarea__inner {
  border: none;
}

::v-deep .el-input__inner:hover {
  border: 1px dashed #303133;
}


::v-deep .el-textarea__inner:focus {
  border: 1px dashed #303133;
}

.luojiset {
  width: 100%;
  margin: 0 auto;

  .luojisettit {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;

    .luojisettitmain {
      width: 95%;
      margin: 0 auto;
      line-height: 50px;
      display: flex;
      justify-content: space-between;

      .luojisettir {
        cursor: pointer;
      }
    }
  }

  .tiaojianlist {
    width: 95%;
    margin: 0 auto;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background-color: #fff;
    padding-bottom: 30px;

    .tiaojianitem {
      .tiaoajianitemmain {
        width: 95%;
        margin: 0 auto;

        .zexian {
          width: 100%;
          margin-top: 30px;
          display: flex;

          .zexiantit {
            width: 90px;
          }

          .zexianshilist {
            display: flex;
            flex-wrap: wrap;

            .zwxianitem {
              margin-right: 10px;
              margin-bottom: 10px;
            }
          }
        }

        .tiaojianiteminfo {
          width: 100%;
          margin-top: 30px;
          display: flex;

          .tiaoajianiteminfotit {
            line-height: 30px;
            width: 80px;
          }

          .tiaoitemdeng {
            line-height: 30px;
            margin-left: 10px;
            margin-right: 10px;
          }

          .tiaoitemming {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            background-color: #f2f3f9;
          }

          .tiaoitemxuanname {
            padding-left: 10px;
            padding-right: 10px;
            // margin-left: 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            background-color: #f2f3f9;
          }
        }

        .tiaojianitemtop {
          width: 100%;
          border-bottom: 1px solid #f0f0f0;
          height: 60px;
          line-height: 60px;
          display: flex;
          justify-content: space-between;

          .tiaojianitemtop2 {
            display: flex;
            color: #409EFF;

            .tiaojianitemtop2bianji {
              cursor: pointer;
            }

            .tiaojianitemtop2del {
              margin-left: 20px;
              color: #409EFF;
              cursor: pointer;
            }
          }

        }
      }
    }
  }

  .tiaojiantian {
    width: 95%;
    margin: 0 auto;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background-color: #fff;
    padding-bottom: 30px;

    .tiaojiantianmain {
      width: 95%;
      margin: 0 auto;

      .tiantop {
        width: 95%;
        border-bottom: 1px solid #f0f0f0;
        height: 60px;
        line-height: 60px;
      }

      .tianmiaoshu {
        height: 50px;
        line-height: 50px;
        font-size: 13px;
      }

      .tianxuan {
        width: 95%;
        height: 100px;
        background-color: #fbfbff;
        border-radius: 10px;
        overflow: hidden;

        .tianxuanmain {
          width: 90%;
          margin: 0 auto;
          margin-top: 32px;
          display: flex;

          .xuanming {
            margin-left: 20px;
          }

          .xuantype {
            margin-left: 10px;
          }

          .xuanxiangitem {
            margin-left: 10px;
          }
        }

      }

      .xuanover {
        margin-top: 30px;
      }

      .xuanbang {
        margin-top: 30px;
      }

      .xuanbtn {
        width: 200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
      }
    }
  }

  .luojisetinfo {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .luojisetinfol {
      font-size: 16px;
      line-height: 30px;
      margin: 20px auto;
    }

    .luojisetinfor {
      font-size: 14px;
      color: #409EFF;
      line-height: 70px;
      cursor: pointer;

    }
  }
}

.tiaojian {
  width: 280px;
  background-color: #fff;
  height: 785px;
  ;
  position: sticky;
  top: 50px;

  // margin-top: 20px;
  // box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3);
  .tiaojianmain {
    width: 90%;
    margin: 0 auto;

    .tijiaomaintit {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 15px;
      color: #212121;
      line-height: 50px;

    }

    .guanjian {
      margin-bottom: 30px;
    }
  }

  .yanzheng {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .yanzhengl {
      font-weight: 400;
      font-size: 13px;
      color: #212121;
      margin-bottom: 30px;
    }
  }

  .wentilei {
    margin-bottom: 30px;
  }

  .tiaojianset {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .tiaojiansetl {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 15px;
      color: #212121;
      line-height: 38px;
    }
  }

  .leixingname {
    width: 100%;
    display: flex;
    margin-bottom: 30px;

    .leixingnamel {
      width: 18px;
      height: 18px;

      svg {
        width: 18px;
        height: 18px;
      }
    }

    .leixingnamer {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: 400;
      font-size: 15px;
      color: #212121;
      line-height: 20px;
      margin-left: 10px;
    }
  }
}


.content {
  // padding-left: 30px;
  // padding-bottom: 30px;
  // padding-top: 20px;
  background-color: #F2F2F2;

  .gunmain {
    height: 83vh;
    overflow-y: scroll !important;
    scrollbar-width: auto !important;

    .center_content {
      // overflow:auto;

    }
  }

  .myBtn {
    // padding: 0 2px 0 2px;
    margin-left: 10px;
    // height: 35px;
    border-radius: 50%;
    border: 1px solid white;
    // border up  
  }

  .circle {
    width: 16px;
    /* 设置圆的直径 */
    height: 16px;
    /* 与宽度相同，以确保是一个圆形 */
    border: 1px solid #CCCCCC;
    /* 边框颜色为黑色，宽度为5px */
    border-radius: 50%;
    /* 边框圆角设置为50%，生成圆形 */
    background-color: transparent;
    /* 确保背景是透明的，这样只有边框可见 */
  }

  .square {
    width: 16px;
    /* 设置方形的宽度 */
    height: 16px;
    /* 设置方形的高度，与宽度相同以确保是方形 */
    border: 1px solid #CCCCCC;
    /* 设置边框的样式为实线、颜色为黑色、宽度为5px */
    background-color: transparent;
    /* 确保背景是透明的，这样只有边框可见 */
  }


  .top_box {
    //width: 1220px;
    position: sticky;
    top: 0;
    z-index: 3;
    margin-left: 22px;
    margin-right: 22px;
    height: 50px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    .top_preview {
      cursor: pointer;
      display: flex;
      align-items: center;
      //line-height: 10px;
      padding-right: 30px;

      .top_preview_text {
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: 400;
        font-size: 13px;
        color: #212121;
        line-height: 15px;
        padding-left: 6px;
      }
    }

    .top_submit {
      cursor: pointer;
      padding-right: 20px;
    }
  }

  .rightxuan {
    width: 280px;
    background-color: #fff;
    height: 785px;
    position: sticky;
    top: 50px;

    .left_content {
      width: 90%;
      margin: 0 auto;

      .options {
        // padding: 20px;
        cursor: pointer;
        margin-top: 20px;

        .options_title {
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 15px;
          color: #212121;
          line-height: 18px;
        }

        .options_item {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin-top: 20px;

          .options_item_box {
            display: flex;
            align-items: center;
            width: 100px;
            background-color: #EBF5FF;
            padding: 7px 0 6px 10px;
            margin-right: 10px;
            margin-bottom: 14px;
            border-radius: 4px;

            .item_box_title {
              font-family: Microsoft YaHei UI, Microsoft YaHei UI;
              font-weight: 400;
              font-size: 13px;
              color: #212121;
              line-height: 15px;
              padding-left: 10px;
            }
          }
        }
      }

      .notice {
        overflow: hidden;

        .notice_title {
          margin-top: 20px;

          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 15px;
          color: #212121;
          line-height: 18px;
          // padding-left: 20px;
        }

        .article {
          // padding: 20px;
          margin-top: 10px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: 400;
          font-size: 13px;
          color: #212121;
          line-height: 20px;
        }

        .special {}
      }


    }
  }


  // .right_content {
  //   background-color: #fff;
  //   height: 928px;
  //   position: sticky;
  //   top: 50px;
  // }

  // .project:nth-child(1) {
  //   background-color: #fff;
  //   top: 0;
  //   position: sticky;
  //   z-index: 3;
  // }

  .project {
    background-color: #fff;

    .plus_hover {
      line-height: 25px;
      width: 30px;
      text-align: center;
    }

    .scores {
      min-width: 240px;
    }
  }
}

//  :hover,:active{
//  border-color: #53A8FF;
// }
.minus {
  // width:36px;
  // height: 38px;
  background-color: rgb(245, 108, 108);
  color: #fff;
  border-color: rgb(245, 108, 108) !important;
  cursor: pointer;

  &:active {
    background-color: rgb(253, 226, 226);
  }

  &:hover {
    background-color: rgb(245, 108, 108, 0.8);
  }
}

.up {
  // width:36px;
  // height: 38px;
  background-color: rgb(103, 194, 58);
  color: #fff;
  border-color: rgb(103, 194, 58) !important;
  cursor: pointer;

  &:active {
    background-color: rgb(156, 195, 70);
  }

  &:hover {
    background-color: rgb(103, 194, 58), 0.8;
  }
}

.down {
  // width:36px;
  // height: 38px;
  background-color: rgb(230, 162, 60);
  color: #fff;
  border-color: rgb(230, 162, 60) !important;
  cursor: pointer;

  &:active {
    background-color: rgb(245, 200, 90);
  }

  &:hover {
    background-color: rgb(230, 162, 60), 0.8;
  }
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 1s ease-in-out;
}

.fade-leave {
  position: absolute;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.move {
  transition: transform 1s;
}

.plus {
  background-color: rgb(83, 168, 255);
  color: #fff;
  border-color: rgb(83, 168, 255) !important;
  cursor: pointer;

  &:active {
    background-color: rgb(217, 236, 255);
  }

  &:hover {
    background-color: rgb(102, 177, 255);
  }
}

.plus-project {
  background-color: rgb(22, 94, 131);
  color: #fff;
  border-color: rgb(22, 94, 131) !important;
  cursor: pointer;

  &:active {
    background-color: rgb(217, 236, 255);
  }

  &:hover {
    background-color: rgb(22, 120, 180);
  }
}

.request {
  font-size: 19px;
  font-weight: bold;

  &::after {
    margin-left: 5px;
    content: "*";
    color: red;
  }
}

#no_center {
  align-items: start !important;
}
</style>
<style lang="scss">
//解决postion：sticky失效问题，重写了app-main
.app-main {
  overflow: inherit !important;
}

.submitBtn {
  font-weight: 700;
  cursor: pointer;
  background-color: #67C23A;
  color: white;
  border-color: #67C23A;
}

.viewBtn {
  background-color: #909399;
  color: white;
  border-color: #909399;
  font-weight: 700;
  cursor: pointer;
}

.addBtn {
  background-color: #E6A23C;
  color: white;
  border-color: #E6A23C;
  font-weight: 700;
  cursor: pointer;
}
</style>